<template>
	<view style="position: relative;">
		<view >
			<image src="https://cdn.uviewui.com/uview/swiper/swiper1.png" class="img" mode="aspectFill"></image>
			<image src="/static/images/icon_back.png" class="back"></image>
			
			<view style="padding: 20rpx;	background: white;">
				<view class="title">这是活动的名称</view>
				<view class="row type">
					<image src="/static/images/read.png" class="type-img"></image>
					<view class="type-text">读书会</view>
				</view>
				<view class="row-between-center" style="margin-top: 30rpx;">
					<view class="fee">免费</view>
					<view class="status">报名中</view>
				</view>
				<view class="line"></view>
				<view class="row-h-center" style="margin-top: 28rpx;">
					<image src="/static/images/count.png" class="icon"></image>
					<view class="person">活动人数</view>
					<view class="person-value">12/20</view>
				</view>
				<view class="row-h-center" style="margin-top: 28rpx;">
					<image src="/static/images/time.png" class="icon"></image>
					<view class="person">活动时间</view>
					<view class="person-value">08月12日 12:00 - 08月20日 12:00</view>
				</view>
				<view class="row-between-center" style="margin-top: 28rpx;">
					<view class="row-h-center">
						<image src="/static/images/location2.png" class="icon"></image>
						<view class="person">活动地点</view>
						<view class="person-value">青岛市黄岛区广西路60号</view>
					</view>
					<view class="nav-bg row-center">
						<image src="/static/images/nav.png" class="nav"></image>
					</view>
				</view>
			</view>
			
			<view class="item col">
				<view class="row-h-center"><view class="section"></view><view class="section-title">活动人数</view></view>
				<view class="row-center" style="margin-top: 30rpx;">
					<view class="item-count col-center" style="margin-right: 10rpx;">
						<view class="item-count-key">已报名人数</view>
						<view class="item-count-blue">12</view>
					</view>
					
					<view class="item-count col-center"  style="margin-left: 10rpx;">
						<view class="item-count-key">已核销人数</view>
						<view class="item-count-blue">12</view>
					</view>
				</view>
				
				<view class="row-center" style="margin-top: 20rpx;">
					<view class="item-count col-center" style="margin-right: 10rpx;">
						<view class="item-count-key">申请退款人数</view>
						<view class="item-count-blue">12</view>
					</view>
					
					<view class="item-count col-center" style="margin-left: 10rpx;">
						<view class="item-count-key">已退款人数</view>
						<view class="item-count-blue">12</view>
					</view>
				</view>
			</view>
		
		<view class="item col">
			<view class="row-h-center"><view class="section"></view><view class="section-title">活动人数</view></view>
			<view class="row-center" style="margin-top: 30rpx;">
				<view class="item-count col-center" style="margin-right: 10rpx;">
					<view class="item-count-key">报名总金额</view>
					<view class="item-count-orange">¥12</view>
				</view>
				
				<view class="item-count col-center"  style="margin-left: 10rpx;">
					<view class="item-count-key">已核销金额</view>
					<view class="item-count-orange">¥12</view>
				</view>
			</view>
			
			<view class="row-center" style="margin-top: 20rpx;">
				<view class="item-count col-center" style="margin-right: 10rpx;">
					<view class="item-count-key">已核销后收入</view>
					<view class="item-count-orange">¥12</view>
				</view>
				
				<view class="item-count col-center" style="margin-left: 10rpx;">
					<view class="item-count-key">已退款金额</view>
					<view class="item-count-orange">¥12</view>
				</view>
			</view>
		</view>
		
		</view>
		<view style="height: 150rpx;"></view>
		<view class="bottom row-between-center">
			<view class="row">
				<view class="col-center" style="margin-left: 72rpx;">
					<image src="/static/images/gaikuang.png" class="icon"></image>
					<view class="gaikuang">概况</view>
				</view>
				<view class="col-center" style="margin-left: 66rpx;">
					<image src="/static/images/bianji.png" class="icon"></image>
					<view class="gaikuang">编辑</view>
				</view>
			</view>
			
			<view class="btn row-center">
				分享活动
			</view>
			
		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		methods: {

		}
	}
</script>
<style>
	page{
		background: #F2F3F8;
	}
</style>
<style scoped lang="scss">
	
	
	.bottom {
		width: 100%;
		bottom: 0;
		position: fixed;
		height: 120rpx;
		background: #FFF;
	
		.btn {
			height: 80rpx;
			width: 248rpx;
			margin-left: 36rpx;
			margin-right: 36rpx;
			border-radius: 40rpx;
			background: #3B60D3;
			color: #FFF;
			font-size: 32rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 48rpx;
			/* 150% */
		}
		}
	
	.back {
		position: absolute;
		top: 60rpx;
		left: 24rpx;
		width: 64rpx;
		height: 64rpx;
	}

	.img {
		width: 100%;
		height: 480rpx;
	}

	.line {
		margin-top: 30rpx;
		height: 1rpx;
		background: #E6E6E6;
	}

	.title {
		color: #20252B;
		font-size: 32rpx;
		font-style: normal;
		font-weight: 500;
		line-height: 48rpx;
	}

	.type {
		width: 120rpx;
		margin-top: 10rpx;
		background: #FFE9D7;

		.type-img {
			width: 32rpx;
			height: 32rpx;
		}

		.type-text {
			margin-right: 10rpx;
			margin-left: 10rpx;
			color: #CD5F28;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 36rpx;
			/* 180% */
		}
	}

	.fee {
		color: #EA401D;
		font-size: 28rpx;
		font-style: normal;
		font-weight: 500;
		line-height: 44rpx;
		/* 157.143% */
	}

	.status {
		color: #3B60D3;
		font-size: 28rpx;
		font-style: normal;
		font-weight: 500;
		line-height: 44rpx;
		/* 157.143% */
	}

	.icon {
		width: 32rpx;
		height: 32rpx;
	}
	.gaikuang{
		color:  #6A6876;
		font-size: 20rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 36rpx; /* 180% */
	}
	.person {
		color: #20252B;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 500;
		line-height: 40rpx;
	}

	.person-value {
		color: #6A6876;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 40rpx;
		/* 166.667% */
	}

	.nav {
		width: 24rpx;
		height: 24rpx;
	}

	.nav-bg {
		background-color: #ecf0fb;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
	}
	.item{
		background: white;
		margin-top: 20rpx;
		padding: 30rpx 20rpx;
	}
	
	.item-count{
		width: 330rpx;
		height: 172rpx;
		border-radius: 12rpx;
		border: 0.6rpx solid #E6E7EB;
		background: #F7F8FC;
	}
	.item-count-key{
		color:  #6A6876;
		font-size: 28rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 44rpx; /* 157.143% */
	}
	.item-count-blue{
		color: #347FFF;
		font-size: 48rpx;
		font-style: normal;
		font-weight: 700;
		line-height: 48rpx; /* 100% */
	}
	.item-count-orange{
		color: #FF8934;
		font-size: 48rpx;
		font-style: normal;
		font-weight: 700;
		line-height: 48rpx; /* 100% */
	}
	.section{
		width: 10rpx;
		height: 32rpx;
		border-radius: 5rpx;
		background: #3B60D3;
	}
	.section-title{
		margin-left: 20rpx;
		color:  #20252B;
		font-size: 32rpx;
		font-style: normal;
		font-weight: 500;
		line-height: 48rpx; /* 150% */
	}
</style>